<template>
  <div class="container">
    <van-nav-bar left-arrow>
      <template #left>
        <div class="left">
          <van-icon name="arrow-left" color="#fff" size="18" />
          <span>BTC/USDT</span>
          <span class="magnification">10x</span>
          <van-icon name="play" class="play" color="#fff" size="10" />
        </div>
      </template>
      <template #right>
        <div class="right">
          <!-- <van-icon name="star-o" size="20" color="#fff" /> -->
          <van-icon name="star" color="#FFB117" size="20" />
          <img src="./images/download.png" alt="">
        </div>
      </template>
    </van-nav-bar>

    <div class="body">
      <van-tabs v-model="activeName" color="#fff" background="#000" title-inactive-color="#929292"
        title-active-color="#fff" line-width="26px">
        <van-tab title="行情" name="a">
          <Market />
        </van-tab>
        <van-tab title="概况" name="b">
          <GeneralSituation />
        </van-tab>
        <van-tab title="数据" name="c">内容 3</van-tab>
        <van-tab title="交易" name="d">
          <Deal />
        </van-tab>
        <van-tab title="跟单" name="e">内容 3</van-tab>
        <van-tab title="策略" name="f">内容 3</van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { Tabs, Tab } from 'vant'
import GeneralSituation from './Tabs/GeneralSituation.vue'
import Deal from './Tabs/Deal.vue'
import Market from './Tabs/Market/Market.vue'
export default {
  name: 'tabsPage',
  components: {
    'van-tabs': Tabs,
    'van-tab': Tab,
    GeneralSituation,
    Deal,
    Market
  },
  data() {
    return {
      activeName: 'a'
    }
  }
}
</script>

<style lang="scss" scoped>
// /deep/ * {
//   box-sizing: border-box;
// }

.container {
  background-color: #000;
  height: 100vh;
  overflow: hidden;
  color: #fff;
  display: grid;
  grid-template-rows: auto 1fr;
  padding-bottom: 0 !important;

  /deep/ .van-nav-bar {
    background-color: #000;

    &::after {
      border-bottom: none;
    }

    .left {
      display: flex;
      align-items: center;
      gap: 20px;

      .magnification {
        font-size: 20px;
        color: #EAA900;
        transform: translateY(3px);
      }

      .play {
        transform: rotate(90deg);
      }
    }

    .right {
      display: flex;
      align-items: center;
      gap: 20px;
    }
  }

  .body {
    height: 100%;
    overflow: hidden;

    /deep/ .van-tabs {
      grid-template-rows: auto 1fr;
      height: calc(100% - 100px);

      .van-tabs__wrap {
        border-bottom: 1px solid #212121;
      }

      .van-tabs__nav {
        background-color: #000;
        gap: 50px;

        .van-tab {
          padding: 0 !important;
          flex: inherit;
        }

        .van-tab__text {
          font-size: 26px !important;
        }
      }

      .van-tabs__content {
        padding: 20px 30px !important;
        height: 100%;
        overflow: auto;
      }
    }
  }
}
</style>